<template>
  <div>
    <el-card>
      <div>
      </div>
      <div>
          <div class="condition">
            <div class="text1">选择类型</div>
          </div>
            <div class="bg-card">
            <el-form :inline="true">
              <el-form-item prop="scarpType" label="查询类型">
                <el-select v-model="type" :value="1" >
                  <el-option
                    v-for="item in scarpTypeOpt"
                    :key="item.index"
                    :label="item.value"
                    :value="item.index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="type === 1 ? '入库年份' : type === 2 ? '出库年份' : '报废年份'">
                <el-date-picker
                  style="width:180px;"
                  v-model="year"
                  type="year"
                  value-format="yyyy"
                  format="yyyy"
                  placeholder="选择年"
                ></el-date-picker>
              </el-form-item>
              <el-form-item :label="type === 1 ? '入库月份' : type === 2 ? '出库月份' : '报废月份'">
                <el-date-picker
                  style="width:180px;"
                  v-model="month"
                  type="month"
                  placeholder="选择月"
                  format="MM"
                  value-format="MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item :label="type === 1 ? '入库时间' : type === 2 ? '出库时间' : '报废时间'">
                <el-date-picker
                  v-model="inboundTime"
                  type="date"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="货品编号">
                <el-input v-model="query.goodsId01" @keyup.enter.native="fetch"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="margin-top:28px" @click="hanleClick">查询</el-button>
                <el-button-group style="margin-left:30px" v-if="size > 1">
                  <el-button page="mini" type="primary" icon="el-icon-arrow-left" :disabled="!isDisabled1" @click="handleSub">上一页</el-button>
                  <el-button page="mini" type="primary" @click="handleAdd" :disabled="!isDisabled2">下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
                </el-button-group>
              </el-form-item>
            </el-form>
          </div>
      </div>
      <div style="text-align: center;line-height:30px;font-size:18px;margin-top:20px">
        <span>{{year}}年
          <span v-show="month && !inboundTime">{{month}}月份</span>
          <span v-show="inboundTime">{{inboundTime ? inboundTime.substring(4, 6) + '月' + inboundTime.substring(6, 8) : ''}}日</span>
          {{type === 1? '入库统计货品数量' : type === 2 ? '出库统计货品数量' : '报废统计货品数量'}}
        </span>
      </div>
      <ve-histogram v-if="isShow" :data="newlist" :settings="chartSettings" :extend="vchartsConfig.extend" :legend="legend"></ve-histogram>
      <div v-else class="box">
        <span>没有相关数据</span>
      </div>
    </el-card>
  </div>
</template>
<script>
import VeHistogram from "v-charts/lib/histogram.common";
import { table } from "@/mixin/table";
export default {
  mixins: [table],
  data() {
    return {
      legend: { bottom: "0" },
      vchartsConfig: {
        extend: {
          // 每个柱子
          series(v) {
            // 设置柱子的样式
            v && v.forEach(i => {
              console.log("series", i);
              i.barWidth = 25;
              i.itemStyle = {
                color: "#105FD1",
                borderWidth: 0
              };
              i.label = {
                color: "#666",
                show: true,
                position: "top",
              };
            });
            return v;
          },
          xAxis: {
            type: "category",
            show: true,
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴每项的文字
            axisLabel: {
              showMaxLabel: true,
              showMinLabel: true,
              color: "#3a3a3a",
              rotate: 0, //刻度文字旋转，防止文字过多不显示
              margin: 8, //文字离x轴的距离
              boundaryGap: true,
              fontSize: 14,
              formatter: v => {
                // console.log('x--v',v)
                if (v.length > 3) {
                  return v.substring(0, 3) + "...";
                }
                return v;
              }
            },
            // X轴下面的刻度小竖线
            // x轴对应的竖线
            splitLine: {
              show: false,
              interval: 0,
              lineStyle: {
                color: "red",
                backgroundColor: "red"
              }
            }
          },
        }
      },
      chartSettings: {
        barMaxWidth: 1
      },
      chartData: {
        columns: ["货品名称", "物品出入数量"],
        rows: []
      },
      type: 1,
      page: 1,
      size: 1,
      isShow: true,
      scarpTypeOpt: [{ index: 1, value: "入库统计" }, { index: 2, value: "出库统计" }, { index: 3, value: "报废统计" }],
      query: {
        day: "",
        goodsId01: "",
        // inboundTime: "",
        month: "",
        warehouse: 2,
        year: ""
      },
      inboundTime: "",
      month: "",
      year: ""
    };
  },
  component: {
    've-histogram': VeHistogram,
  },
  methods: {
    async fetch () {
      this.chartData.rows = []
      let res, obj, arr
      this.size = 1
      this.page = 1
      this.query.year = this.year
      this.query.month = this.month
      if (this.type === 1) {
        this.query.inboundTime = this.inboundTime
        res = await this.$http.post('/restful/v1/dd/inbound/statisticsInboundGoods', this.query)
        obj = res.data.object
        this.updateShow(obj)
        this.chartData.columns = ["货品名称", "物品库存数量"]
        for (const key in obj) {
          arr = key.split('--')
          this.chartData.rows.push({ 货品名称: arr[1], 物品库存数量: obj[key] })
        }
      } else if (this.type === 2) {
        this.query.outboundTime = this.inboundTime
        res = await this.$http.post('/restful/v1/dd/outbound/statisticsOutboundGoods', this.query)
        obj = res.data.object
        this.updateShow(obj)
        this.chartData.columns = ["货品名称", "物品出库数量"]
        for(const key in obj) {
          arr = key.split('--')
          this.chartData.rows.push({ 货品名称: arr[1], 物品出库数量: obj[key] })
        }
      } else if (this.type === 3) {
        this.query.scarpTime = this.inboundTime
        res = await this.$http.post('/restful/v1/dd/scarp/statisticsScarpGoods', this.query)
        obj = res.data.object
        this.updateShow(obj)
        this.chartData.columns = ["货品名称", "物品报废数量"]
        for(const key in obj) {
          arr = key.split('--')
          this.chartData.rows.push({ 货品名称: arr[1], 物品报废数量: obj[key] })
        }
      }
      this.size = Math.ceil(this.chartData.rows.length / 15)
    },
    hanleClick () {
      this.fetch()
    },
    handleSub () {
      if (this.page === 1) {
        return
      }
      this.page--
    },
    handleAdd () {
      this.page++
    },
    updateShow (obj) {
      if (JSON.stringify(obj) == "{}") {
        this.isShow = false
      }else {
        this.isShow = true
      }
    }
  },
  created () {
    var date = new Date()
    this.year = String(date.getFullYear())
  },
  watch: {
    type () {
      this.query = {
        day: "",
        goodsId01: "",
        inboundTime: "",
        month: "",
        warehouse: 1,
        year: ""
      }
      this.fetch()
    },
    inboundTime () {
      if (this.inboundTime) {
        this.month = ''
      }
      this.fetch()
    },
  },
  computed: {
    isDisabled1 () {
      return this.page !== 1
    },
    isDisabled2 () {
      return this.size !== this.page
    },
    newlist () {
      var arr = this.chartData.rows.slice((this.page - 1) * 15, this.page * 15)
      return {
        columns: this.chartData.columns,
        rows: arr
      }
    }
  }
};
</script>
<style lang="less" scoped>
.box{
  width:100%;
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center
}
</style>
